<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/register.css">
    <script src="../js/axios.min.js"></script>
    <script src="../js/reg.js"></script>
</head>

<body>
    <iframe src="../html/header.html" frameborder="0" scrolling="no" width="100%" height="160px"></iframe>
    <!-- 导航 -->
    <section>
        <ul class="sec-nav">
            <li><a href="../index.html">首页</a></li>
            <li><a href="../html/all-flower.html">鲜花</a></li>
            <li><a href="#">水果花束</a></li>
            <li><a href="#">设计师臻选</a></li>
            <li><a href="#">星座专场</a></li>
            <li><a href="#">永生瓶花</a></li>
            <li>
                <a href="#">鲜花批发</a>
                <div class="nav-wholesale">
                    <ul>
                        <li><a href="">玫瑰花</a></li>
                        <li><a href="">洋桔梗</a></li>
                        <li><a href="">绣球花</a></li>
                        <li><a href="">康乃馨</a></li>
                        <li><a href="">百合花</a></li>
                        <li><a href="">向日葵</a></li>
                        <li><a href="">郁金香</a></li>
                        <li><a href="">满天星</a></li>
                        <li><a href="">乒乓菊</a></li>
                        <li><a href="">紫罗兰</a></li>
                        <li><a href="">雏菊</a></li>
                        <li><a href="">黄莺</a></li>
                        <li><a href="">相思梅</a></li>
                        <li><a href="">勿忘我</a></li>
                        <li><a href="">马蹄莲</a></li>
                        <li><a href="">扶郎花</a></li>
                        <li><a href="">菊花</a></li>
                        <li><a href="">马蹄莲</a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">绿植专区</a></li>
            <li><a href="#">花语大全</a></li>
        </ul>
    </section>
    <!-- 注册 -->
    <div class="register">
        <div class="reg-big">
            <h2>注册</h2>
            <ul>
                <li><label>用户名：</label><input type="text" id="username"></li>
                <span>用户名：数字字母下划线-组成，3-16位</span>
                <li><label>密码：</label><input type="text" id="password"></li>
                <span>密码：6-8位字母或数字组成</span>
            </ul>
            <div class="reg-regBtn"><button>立即注册</button></div>
            <div class="reg-logBtn"><button onclick="logBtn()">已有账号？立即登录</button></div>
        </div>
    </div>
    <!-- 尾部 -->
    <iframe src="../html/footer01.html" frameborder="0" scrolling="no" width="100%" height="410px"></iframe>
    <script>
        // 注册正则验证
        document.getElementById('username').onblur = function () {
            var user = username.value;
            var userRegular = /^[a-z0-9_-]{4,16}$/;
            if (!userRegular.test(user)) {
                alert("请输入正确用户名格式！");
                return false;
            }
            return true;
        }
        document.getElementById('password').onblur = function () {
            var pwd = password.value;
            var pwdRegular = /^[a-zA-Z0-9]{6,8}$/;
            if (!pwdRegular.test(pwd)) {
                alert("请输入正确密码格式！");
                return false;
            }
            return true;
        }
        function logBtn() {
            location.href = 'login.html'
        }
    </script>
</body>

</html>